<template>
  <div class="container">
    <div class="header-cont">
      <ul class="navbar">
        <a target="_blank" href="http://localhost:9528/#/index">
          <div class="border-right" style="top:-3px" />
          <li class="navbar-item">首页</li>
        </a>
        <a target="_blank" href="http://localhost:9528/#/question">
          <li class="navbar-item">问答</li>
        </a>
        <a target="_blank" href="http://localhost:9528/#/articleList">
          <li class="navbar-item">阅读</li>
        </a>
        <a target="_blank" href="http://localhost:9528/#/consultation">
          <li class="navbar-item">心理咨询</li>
        </a>
        <a target="_blank" href="http://localhost:9528/#/to-be-consultant">
          <li class="navbar-item">成为咨询师</li>
        </a>
      </ul>
      <!-- 搜索框 -->
      <div class="search">
        <!-- <el-autocomplete
          v-model="search"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect2"
        /> -->
        <el-autocomplete
          v-model="search"
          class="inline-input"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect2"
        />
      </div>
      <div id="header-auth-user-div">
        <div v-if="isAlive" class="user-center">
          <div class="avatar">
            <div class="avatar-container">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-avatar style="margin-left:10px;" :src="user_avatar" />
                  <i class="el-icon-caret-bottom el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item class="el-dropdown-item" @click.native="toPersonalHomePage">
                    主页
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="toWhisperMyChats">
                    消息
                    <el-badge class="mark" :value="userUnRead" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="logout">
                    退出
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
          </div>
          <!-- <div v-if="isAlive">
            <el-dropdown trigger="click" style="margin-top:8px">
              <span class="el-dropdown-link">
                <el-avatar style="margin-left:10px;margin" :src="user_avatar" />
                <i class="el-icon-caret-bottom el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="toPersonalHomePage">
                  主页
                  <el-badge class="mark" />
                </el-dropdown-item>
                <el-dropdown-item class="clearfix" @click.native="toWhisperMyChats">
                  消息
                  <el-badge class="mark" :value="userUnRead" />
                </el-dropdown-item>
                <el-dropdown-item class="clearfix">
                  回复
                  <el-badge class="mark" :value="3" />
                </el-dropdown-item>
                <el-dropdown-item class="clearfix" @click.native="logout">
                  退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div v-else style="margin-top:11px;margin-left: 20px">
            <el-button type="text" @click="toCustomLoginPage">登录</el-button>
          </div>-->
        </div>
        <a v-else @click="toCustomLoginPage">
          <div class="pc-login"><span class="txt">登录</span></div>
        </a>
      </div>
    </div>
    <!-- 登录/注册 -->
    <!-- 管理员登录跳转 -->
    <!-- <div style="margin-top:11px;margin-left: 20px">
          <el-button type="text" @click="toAdminLogin">管理员登录</el-button>
        </div> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { globalSearch } from '@/api/global'
import { unReadCount } from '@/api/user'
export default {
  name: 'Header',
  data() {
    return {
      search: '',
      allSearch: [],
      activeIndex: '/index',
      activeIndex2: '1',
      input3: '',
      dialogFromVisible: false,
      userUnRead: ''
    }
  },
  computed: {
    ...mapGetters([
      'user_avatar'
    ]),
    isAlive() {
      return this.$store.getters.user_token !== undefined
    }
  },
  mounted() {
    this.allSearch = this.loadAll()
    this.unReadCount()
    setTimeout(() => {
      console.log(this.allSearch)
    }, 500)
  },
  methods: {
    toPersonalHomePage() {
      this.$router.push('/personalHomePage')
    },
    toWhisperMyChats() {
      this.$router.push('/whisper/myChats')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    toCustomLoginPage() {
      console.log('跳转用户登录页面')
      this.$router.push('/login')
    },
    async logout() {
      await this.$store.dispatch('user/logout', { userId: this.$store.state.user.id })
    },
    goto(path) {
      this.$router.push(path)
    },
    loadAll() {
      var array = []
      globalSearch({ searchStr: this.search }).then(res => {
        array.push(res.data.userList)
      })
      return array
    },
    querySearchAsync(queryString, cb) {
      console.log(queryString)
      var allSearch = this.allSearch[0]
      const programList = []
      for (let i = 0; i < allSearch.length; i++) {
        programList.push({ 'value': allSearch[i].username, 'id': allSearch[i].id })
      }
      var results = queryString ? programList.filter(this.createStateFilter(queryString)) : programList
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
      // console.log(results)
    },
    createStateFilter(queryString) {
      return (search) => {
        return (search.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    handleSelect2(item) {
      this.$router.push('/user/' + item.id)
    },
    unReadCount() {
      unReadCount({ userId: this.$store.state.user.id }).then(res => {
        this.userUnRead = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
}
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
ul, ol {
    list-style: none;
}
.container{
    width: 100%;
    height: 72px;
    background-color: #fff;
    position: fixed;
    z-index: 10;
    border-bottom: 1px solid #ddd;
}
.header-cont {
    position: relative;
    width: 1050px;
    min-width: 1050px;
    height: 72px;
    margin: 0 auto;
}
.container a {
    text-decoration: none;
    outline: 0;
    position: relative;
}
.container .header-cont .navbar .border-right {
    position: absolute;
    height: 22px;
    display: inline-block;
    width: 1px;
    border-right: 1px dashed #ccc;
    top: -3px;
    right: 0;
}
.container .header-cont .navbar .navbar-item {
    display: inline-block;
    height: 72px;
    line-height: 72px;
    padding: 0 10px;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    position: relative;
}
.container .header-cont .navbar .navbar-item:hover {
   background-color: #f3f4f5;
}
.container .navbar {
    float: left;
    height: 72px;
    margin-left: 200px;
}
.container .search {
    float: left;
    width: 170px;
    height: 32px;
    margin-top: 15px;
    margin-left: 30px;
    position: relative;
}
.container .user-center .avatar {
    position: relative;
    float: left;
    width: 50px;
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
    height: 72px;
    margin-left: 40px;
}
.container .pc-login {
    float: left;
    height: 72px;
    width: 67px;
    line-height: 72px;
    margin-left: 30px;
    cursor: pointer;
    color: #0b8bff;
    text-align: center;
    font-size: 16px;
}
.container .user-center .avatar {
    position: relative;
    float: left;
    width: 75px;
    text-align: center;
    padding-top: 15px;
    cursor: pointer;
    height: 72px;
}
.container .user-center .avatar .avatar-img {
    margin-top: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.container .user-center .avatar .show-list {
    position: absolute;
    top: 72px;
    left: 0;
    width: 160px;
    background: #fff;
    box-shadow: 0 4px 14px 0 rgb(0 0 0 / 23%);
    font-size: 14px;
    display: none;
    z-index: 10;
}
.container .user-center .avatar .show-list ul {
    border-bottom: 1px solid #e1e1e1;
}
.container .user-center .avatar .show-list ul li:first-child {
    margin-top: 10px;
}
.container .user-center .avatar .show-list a {
    text-decoration: none;
    outline: 0;
    color: #000;
    display: block;
}
.container .user-center .avatar .log-out {
    color: #ff5b5b;
    height: 46px;
    line-height: 46px;
    cursor: auto;
}
.container .user-center .avatar .log-out a {
    cursor: pointer;
    color: #ff5b5b;
}
.el-dropdown-item{
  width: 70px;
  text-align: center;
}
</style>
